<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="${contestPath }/static/assets/css/foundation-datepicker.css"/>
<style type="text/css">
	.page-header, .page-header label, .page-header select, .page-header span{
		float: left;
	}
	.page-header{
		width: 100%;
		height: 40px;
		line-height: 29px;
	}
	#check{
		width: 40px;
		height: 30px;
	}
	#query input{
		width: 150px;
		height: 30px;
	}
</style>

</head>

<body class="no-skin">

	<!-- /section:basics/sidebar -->
	<div class="main-content">
		<!-- #section:basics/content.breadcrumbs -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try {
					ace.settings.check('breadcrumbs', 'fixed')
				} catch (e) {
				}
			</script>

			<ul class="breadcrumb">
				<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a>
				</li>

				<li><a href="#">Tables</a></li>
				<li class="active">Simple &amp; Dynamic</li>
			</ul>
			<!-- /.breadcrumb -->

			<!-- #section:basics/content.searchbox -->
			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon"> <input type="text"
						placeholder="Search ..." class="nav-search-input"
						id="nav-search-input" autocomplete="off" /> <i
						class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div>
			<!-- /.nav-search -->

			<!-- /section:basics/content.searchbox -->
		</div>

		<!-- /section:basics/content.breadcrumbs -->
		<div class="page-content">
			<!-- #section:settings.box -->
			<div class="ace-settings-container" id="ace-settings-container">
				<div class="btn btn-app btn-xs btn-warning ace-settings-btn"
					id="ace-settings-btn">
					<i class="ace-icon fa fa-cog bigger-150"></i>
				</div>

				<div class="ace-settings-box clearfix" id="ace-settings-box">
					<div class="pull-left width-50">
						<!-- #section:settings.skins -->
						<div class="ace-settings-item">
							<div class="pull-left">
								<select id="skin-colorpicker" class="hide">
									<option data-skin="no-skin" value="#438EB9">#438EB9</option>
									<option data-skin="skin-1" value="#222A2D">#222A2D</option>
									<option data-skin="skin-2" value="#C6487E">#C6487E</option>
									<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; Choose Skin</span>
						</div>

						<!-- /section:settings.skins -->

						<!-- #section:settings.navbar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-navbar" /> <label class="lbl"
								for="ace-settings-navbar"> Fixed Navbar</label>
						</div>

						<!-- /section:settings.navbar -->

						<!-- #section:settings.sidebar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-sidebar" /> <label class="lbl"
								for="ace-settings-sidebar"> Fixed Sidebar</label>
						</div>

						<!-- /section:settings.sidebar -->

						<!-- #section:settings.breadcrumbs -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-breadcrumbs" /> <label class="lbl"
								for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
						</div>

						<!-- /section:settings.breadcrumbs -->

						<!-- #section:settings.rtl -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-rtl" /> <label class="lbl"
								for="ace-settings-rtl"> Right To Left (rtl)</label>
						</div>

						<!-- /section:settings.rtl -->

						<!-- #section:settings.container -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-add-container" /> <label class="lbl"
								for="ace-settings-add-container"> Inside <b>.container</b>
							</label>
						</div>

						<!-- /section:settings.container -->
					</div>
					<!-- /.pull-left -->

					<div class="pull-left width-50">
						<!-- #section:basics/sidebar.options -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-hover" /> <label class="lbl"
								for="ace-settings-hover"> Submenu on Hover</label>
						</div>

						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-compact" /> <label class="lbl"
								for="ace-settings-compact"> Compact Sidebar</label>
						</div>

						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-highlight" /> <label class="lbl"
								for="ace-settings-highlight"> Alt. Active Item</label>
						</div>

						<!-- /section:basics/sidebar.options -->
					</div>
					<!-- /.pull-left -->
				</div>
				<!-- /.ace-settings-box -->
			</div>
			<!-- /.ace-settings-container -->

			<!-- /section:settings.box -->
			
			
				<div class="page-header">
					<label>查询条件:</label>
					<span>
						<select name="condition">
							<option value="sub">科目</option>
							<option value="id">学号</option>
							<option value="name">姓名</option>
							<option value="date">考试日期</option>
						</select>
						<span class="input-group">
							<span id="query">
							<input name="query" type="text" id="inquiry" class="form-control input-mask-product"  />
							</span>
							<span id="check" class="input-group-addon">
								<i class="ui-icon ace-icon fa fa-search orange"></i>
							</span>
						</span>
					</span>
				</div>
				
				<!-- /.page-header -->
							

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
		<!-- 查看全部成绩信息 -->

					<table id="testListTable"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th width=150>成绩编号</th>
								<th width=150>学号</th>
								<th width=150>姓名</th>
								<th width=150>科目</th>
								<th width=150>考试日期</th>
								<th width=150>成绩</th>
								<th width=150>操作</th>
							</tr>
						</thead>

						<tbody>
							<c:forEach items="${scoreList }" var="score">
								<tr>
									<td>${score.id }</td>
									<td>${score.userId }</td>
									<td>${score.userName }</td>
									<td>${score.subjectName }</td>
									<td>${score.examTimeString }</td>
									<td>${score.score }</td>
									<td>
										<button title="管理成绩" class="btn btn-xs btn-info edit-Score">
											<i class="ace-icon fa fa-pencil bigger-120"></i>
										</button>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				<!-- /.span -->
			</div>
			<!-- /.row -->

<!-- 修改成绩  -  模态框 -->
<div class="modal fade" id="editScoreModal" tabindex="-1" role="dialog"
			aria-labelledby="editTestModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="editTestModalLabel">修改成绩</h4>
					</div>
					<div class="modal-body">
						<form id="editScoreForm" method="POST">
											<p>
												<label>成绩编号:</label><input type="text" name="id" id="id"/>
											</p>
							                <p>
												<label>学生学号:</label><input type="text" name="userId" id="userId" readonly="readonly"/>
											</p>
											<p>
												<label>学生姓名:</label><input type="text" name="userName" id="userName" readonly="readonly" />
											</p>
											<p>
												<label>科目名称:</label><input type="text" name="subjectName" id="subjectName"  readonly="readonly"/>
											</p>
											<p>
												<label>考试时间:</label><input type="text" name="examTimeString" id="examTimeString" readonly="readonly"/>
											</p> 
											<p>
												<label>成绩:</label><input type="text" name="score" id="score"/>
											</p>
											
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="editScoreBtn">修改</button>
					</div>
				</div>
			</div>
		</div>




						<div class="hr hr-18 dotted hr-double"></div>


						<!-- <div class="table-responsive"> -->



						<!--[if !IE]> -->
						<script type="text/javascript">
							window.jQuery
									|| document
											.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.min.js'>"
													+ "<"+"/script>");
						</script>

						<!-- <![endif]-->

						<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
						<script type="text/javascript">
							if ('ontouchstart' in document.documentElement)
								document
										.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.mobile.custom.min.js'>"
												+ "<"+"/script>");
						</script>
						<script
							src="${pageContext.request.contextPath }/static/assets/js/bootstrap.min.js"></script>

						<!-- page specific plugin scripts -->
						<script
							src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.min.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.bootstrap.js"></script>

						<!-- ace scripts -->
						<script
							src="${pageContext.request.contextPath }/static/assets/js/ace-elements.min.js"></script>


						<!-- inline scripts related to this page -->
						<script type="text/javascript">
							jQuery(function($) {
								var oTable1 = $('#sample-table-2')
								//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
								.dataTable({
									bAutoWidth : false,
									"aoColumns" : [ {
										"bSortable" : false
									}, null, null, null, null, null, {
										"bSortable" : false
									} ],
									"aaSorting" : [],

								});

								$(document)
										.on(
												'click',
												'th input:checkbox',
												function() {
													var that = this;
													$(this)
															.closest('table')
															.find(
																	'tr > td:first-child input:checkbox')
															.each(
																	function() {
																		this.checked = that.checked;
																		$(this)
																				.closest(
																						'tr')
																				.toggleClass(
																						'selected');
																	});
												});

								$('[data-rel="tooltip"]').tooltip({
									placement : tooltip_placement
								});
								function tooltip_placement(context, source) {
									var $source = $(source);
									var $parent = $source.closest('table')
									var off1 = $parent.offset();
									var w1 = $parent.width();

									var off2 = $source.offset();
									//var w2 = $source.width();

									if (parseInt(off2.left) < parseInt(off1.left)
											+ parseInt(w1 / 2))
										return 'right';
									return 'left';
								}

							})
						</script>

						<!-- the following scripts are used in demo only for onpage help and you don't need them -->
						<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace.onpage-help.css" />
						<link rel="stylesheet" href="${pageContext.request.contextPath }/static/docs/assets/js/themes/sunburst.css" />

						<script type="text/javascript">
							ace.vars['base'] = '${pageContext.request.contextPath }/static';
						</script>
						<script
							src="${pageContext.request.contextPath }/static/assets/js/ace/elements.onpage-help.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/assets/js/ace/ace.onpage-help.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/docs/assets/js/rainbow.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/docs/assets/js/language/generic.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/docs/assets/js/language/html.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/docs/assets/js/language/css.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/docs/assets/js/language/javascript.js"></script>

<script src="${pageContext.request.contextPath }/static/lib/foundation-datepicker.js" type="text/javascript"></script>
		
<script type="text/javascript">
$(function(){
	
	$('select[name="condition"]').change(function(){
		if($(this).children('option:selected').val() == 'date'){
			$('#query').html('<input name="D1" type="text" id="D1" />~<input name="D2" type="text" id="D2" />');
		}else{
			$('#query').html('<input name="query" type="text" id="inquiry" />');
		}
	});
	$(document).on('mousedown', '#D1, #D2',  function(){
		$( this ).fdatepicker({
			format: 'yyyy-mm-dd'
		});
	});
	
	$('#check').click(function(){
		var condition = $('select[name="condition"]').val();
		var query = '';
		if(condition != 'date'){
			query = $('#inquiry').val();
		}else{
			var D1 = $('#D1').val();
			var D2 = $('#D2').val();
			if(D1 != '' && D2 != ''){
				query = D1 + ',' + D2;
			}
		}
		
		if(query != ''){
			$.ajax({
				type: 'POST',
				url: '${pageContext.request.contextPath }/teacher/getScore',
				data: {
					condition: condition,
					query: query
				},
				dataType: "json",
				success: function(data){
					if(data.success){
						var htmlString = '';
						$.each(data.resultList, function(index, item){
							htmlString += '<tr>';
							htmlString += '<td>' + item.id + '</td>';
							htmlString += '<td>' + item.userId + '</td>';
							htmlString += '<td>' + item.userName + '</td>';
							htmlString += '<td>' + item.subjectName + '</td>';
							htmlString += '<td>' + item.examTimeString + '</td>';
							htmlString += '<td>' + item.score + '</td>';
							htmlString += '<td><button title="管理成绩" class="edit-Score btn btn-xs btn-info ">';
							htmlString += '<i class="ace-icon fa fa-pencil bigger-120"></i>';
							htmlString += '</button></td>';
							htmlString += '</tr>';
						
						});
						$('tbody').html(htmlString);
					}else{
						alert("没有找到");
					}
				}
			});
		}else{
			alert("请输入查询条件");
		}
	})
		
})
</script>


<script type="text/javascript">
//修改成绩
$('.edit-Score').click(function() {
	 id = $(this).parent().siblings().eq(0).text();	
	 $.ajax({
		type: 'POST',
		url: '${pageContext.request.contextPath }/teacher/getExamScoreById',
		data: {
			id: id
		},
		dataType: "json",
		success: function(data) {
			$('#editScoreForm #id').val(data.id);
			$('#editScoreForm #userId').val(data.userId);
			$('#editScoreForm #userName').val(data.userName);
			$('#editScoreForm #subjectName').val(data.subjectName);
		    $('#editScoreForm #examTimeString').val(data.examTimeString); 
			$('#editScoreForm #score').val(data.score);
			 
		}
		
	});  
	$('#editScoreModal').modal('show'); 
});


//提交修改按钮
$("#editScoreBtn").click(function() {
	  if($("#editScoreForm").valid()) { 
		var score = $('#editScoreForm #score').val();
		$.ajax({
			type: "POST",
			url: "${pageContext.request.contextPath }/teacher/updateScore",
			data: {
				id:id,
				score:score
				},
			dataType: "json",
			success: function(data){
				if(data.success) {
					alert('修改成功');
					window.location.reload();
				} else {
					var messageMap = data.messageMap;
					for(var key in messageMap) {
						var value = messageMap[key];
						$('#addTestForm input[name ="'+ key+ '"]').after('<label class="jsr303-message-label">'
												+ value+ '</label>');
					}
					alert('修改失败');
				}
				}
			});
		 } 
	});
</script>

</body>
</html>
